<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            height: 2500px;
        }
        .box{
            width: 200px;
            height: 200px;
            border:1px solid green;
            /* display: inline-block; */
            
        }
        .b1{
            outline: 1px solid red;
            /* border:1px solid green */
            border-radius: 30px;
        }
        .b2{
            outline: 1px solid yellowgreen;
        }
        input{
            height: 50px;
            width: 200px;
            border-radius: 10px;
            outline: none;
            /* border:none; */
            border:1px solid red;
            /* border-style: solid; */
        }
        button{
            outline: none;
        }
        .b3{
            background-color: rgb(204, 192, 192);
            border:none;
            margin:0 auto;
            box-shadow:  5px 6px 10px  2px  black inset,
            -5px -8px 10px 5px red,
            -8px -1px 15px 5px green ;
            
        }
        /* box-shadow和text-shadow区别 */
        /* 
        1.box-shaodw 可以设置 inset(内阴影) 
        2.box-shadow可以设置 spread(阴影大小)
         */
        p{

            font:bolder 30px "黑体";
            /* 文字阴影可以设多个 */
            text-shadow: 1px 1px 5px gray,
            5px 1px 5px rgb(146, 41, 41);
        }
        textarea{
            /* 文本域大小不可调 */
            resize:none;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
 
    <div class="box b1"></div>
    <div class="box b2"></div>
    <input type="text"><br>
    <button>提交</button>
    <div class="box b3">b3</div>
    <p>文字阴影</p>
    <textarea name="" id="" cols="30" rows="10"></textarea>

    
</body>
</html>